<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box{
				display: flex;
				margin: 200px;
			}
			span{
				width: 30px;
				height: 30px;
				cursor: pointer;
				background-color: white;
				margin: 5px;
				color: black;
				text-align: center;
				border: 1px solid black;
				line-height: 30px;
				font-size: 14px;
			}
			.current{
				background-color: black;
				color: white;
			}
			.box span:hover{
				background-color: black;
				color: white;
			}
		</style>
	</head>
	<body>
		
		<div class="box">
			<span class="current">1</span>
			<span>2</span>
			<span>3</span>
			<span>4</span>
			<span>5</span>
			<span>6</span>
			<span>7</span>
		</div>
		
	</body>
</html>
<script>
	// 获取分页元素
	let aSpan = document.querySelectorAll('.box span');
	
	// 设置总页数
	let page = 15;
	
	// 默认设置
	aSpan[0].innerHTML = '1';
	aSpan[1].innerHTML = '2';
	aSpan[2].innerHTML = '3';
	aSpan[3].innerHTML = '4';
	aSpan[4].innerHTML = '...';
	aSpan[5].innerHTML = page -1;
	aSpan[6].innerHTML = page;
	
	// 批量监听
	aSpan.forEach((item, index) =>{
		// 点击事件
		item.onclick = function(){
			// 打印点击到的页数
			// console.log(this.innerHTML);
			
			// 验证 如果点击的是 ... 则无事发生
			if(this.innerHTML == '...') return;
			
			// 获取当前点击的值
			let nowNum = parseInt(this.innerHTML);
			console.log(nowNum);
			
			// 判断处于哪一页 有三种情况
			if(nowNum >0 && nowNum <4){
				// 默认设置一遍
				aSpan[0].innerHTML = '1';
				aSpan[1].innerHTML = '2';
				aSpan[2].innerHTML = '3';
				aSpan[3].innerHTML = '4';
				aSpan[4].innerHTML = '...';
				aSpan[5].innerHTML = page -1;
				aSpan[6].innerHTML = page;
			
				// 排他 把所有的元素设置成未选中状态
				for(let i = 0; i< aSpan.length; i++){
					aSpan[i].style.background = 'white';
					aSpan[i].style.color = 'black';
				}
				// 设置当前点击的元素页数
				this.style.background = 'black';
				this.style.color = 'white';
			}else if(nowNum >= 4 && nowNum < page - 2){
				// 默认设置一遍
				aSpan[0].innerHTML = '1';
				aSpan[1].innerHTML = '...';
				aSpan[2].innerHTML = nowNum - 1;
				aSpan[3].innerHTML = nowNum;
				aSpan[4].innerHTML = nowNum + 1;
				aSpan[5].innerHTML = '...';
				aSpan[6].innerHTML = page;
				
				// 排他 把所有的元素设置成未选中状态
				for(let i = 0; i< aSpan.length; i++){
					aSpan[i].style.background = 'white';
					aSpan[i].style.color = 'black';
				}
				// 设置当前点击的元素页数
				this.style.background = 'black';
				this.style.color = 'white';
			}else if(nowNum >= page - 2 && nowNum <= page){
				// 默认设置一遍
				aSpan[0].innerHTML = '1';
				aSpan[1].innerHTML = '2';
				aSpan[2].innerHTML = '...';
				aSpan[3].innerHTML = page - 3;
				aSpan[4].innerHTML = page - 2;
				aSpan[5].innerHTML = page - 1;
				aSpan[6].innerHTML = page;
				
				// 排他 把所有的元素设置成未选中状态
				for(let i = 0; i< aSpan.length; i++){
					aSpan[i].style.background = 'white';
					aSpan[i].style.color = 'black';
				}
				// 设置当前点击的元素页数
				this.style.background = 'black';
				this.style.color = 'white';
			}
			
			// 拿到当前页nowNum 请求数据
			
		}

	});
	
</script>